<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src="../vue.js"></script>
  </head>

  <body>
    <div id="app">
      {{checked}}
      <!-- 单选复选框   通过boolean 控制 -->
      <input type="checkbox" v-model="checked" />
      <!-- 多个复选框通过数组收集 -->
      你最喜欢的城市是：
      武汉<input type="checkbox" v-model="likeCity"   value="武汉">
      上海<input type="checkbox" v-model="likeCity"   value="上海">
      深圳<input type="checkbox" v-model="likeCity"   value="深圳">
      北京<input type="checkbox" v-model="likeCity"   value="北京">
      <!-- 下拉列表收集 -->
      选择你最喜欢的食物
      <select v-model="likefood" multiple>
        <option value="41">热干面</option>
        <option value="42">炸酱面</option>
        <option value="43">还带面</option>
        <option value="44">都负面</option>
      </select>
    </div>
    <script>
      const vm = new Vue({
        el: "#app",
        data() {
          return {
            checked: false,
            likeCity:[],
            likefood:[]
          };
        },
      });
    </script>
  </body>
</html>
